<!--拜访列表-->
<template>
  <div class="container">
    <el-link icon="el-icon-arrow-left" :underline="false" @click="goBack">返回</el-link>
    <div class="top-part">
      <div class="title">我的拜访</div>
      <div class="btn-group">
        <el-button @click="gotoEdit(false)">新增</el-button>
      </div>
    </div>

    <div class="content-part">
      <div class="search-form">
        <el-form ref="searchForm" :model="searchForm" inline label-position="top">
          <el-form-item class="form-item" prop="unitName" label="企业名称">
            <el-input v-model="searchForm.unitName" type="text" placeholder="请输入企业"></el-input>
          </el-form-item>
          <el-form-item class="form-item" label="企业人数">
            <div class="flex-div">
              <el-input v-model="searchForm.startStaffRange" type="text" placeholder="请输入"></el-input>至
              <el-input v-model="searchForm.endStaffRange" type="text" placeholder="请输入"></el-input>
            </div>
          </el-form-item>
          <el-form-item class="form-item" label="拜访时间">
            <el-date-picker
              v-model="dateRange"
              style="width: 240px"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
            ></el-date-picker>
          </el-form-item>
        </el-form>
        <div class="form-btn">
          <el-button type="text" @click="resetForm">重置</el-button>
          <el-button @click="search" style="margin-left: 36px">搜索</el-button>
        </div>
      </div>
      <div class="table">
        <el-table
          :data="dataList"
          :cell-class-name="cellClassName"
          :header-cell-class-name="headerCellClassName"
        >
          <el-table-column align="left" prop="unitName" label="企业名称" min-width="200">
            <!-- <template slot-scope="{ row }">
							<span class="underline" @click="gotoDetail(row)">
								{{ row.unitName }}
							</span>
            </template>-->
          </el-table-column>
          <el-table-column align="center" prop="unitAddress" label="办公地址" min-width="120"></el-table-column>
          <el-table-column v-if="roles[0].authority === 'ROLE_ADMIN'" align="center" prop="supportUnitCode" label="销售员" min-width="90">
            <template slot-scope="{ row }">
							<span>{{
								supportUnitDict.find((it) => it.value === row.supportUnitCode)
									? supportUnitDict.find((it) => it.value === row.supportUnitCode).label
									: ''
							}}</span>
						</template>
          </el-table-column>
          <el-table-column align="center" prop="linkmanName" label="联系人" min-width="90"></el-table-column>
          <el-table-column align="center" prop="linkmanPhone" label="联系电话" min-width="90"></el-table-column>
          <el-table-column align="center" prop="visitTime" label="拜访时间" min-width="90">
            <template slot-scope="{ row }">
							<span>{{
                parseTime(row.visitTime, '{y}-{m}-{d}')
              }}</span>
						</template>
          </el-table-column>
          <el-table-column align="center" prop="visitSubjectMatter" label="拜访事由" min-width="90"></el-table-column>
          <el-table-column align="center" prop="visitRemark" label="备注"></el-table-column>
          <!-- <el-table-column fixed="right" label="操作" width="50">
						<template slot-scope="{ row }">
							<el-button class="table-btn" type="text" size="small" :disabled="row.confirmStatus === 1"
								@click="gotoEdit(row)">编辑</el-button>
						</template>
          </el-table-column>-->
        </el-table>
        <div class="page">
          <el-pagination layout="prev,slot, next" :total="total" @current-change="currentChange">
            <!-- <el-button type="text" class="prev" disabled>上一页</el-button> -->
            <span class="current">{{ pageNum }}</span>
            <span class="total">
              /{{
              total % pageSize == 0
              ? total / pageSize
              : Math.ceil(total / pageSize)
              }}
            </span>
            <!-- <el-button type="text" class="next">下一页</el-button> -->
          </el-pagination>
        </div>
      </div>
    </div>
    <editDialog v-model="editDialogVisible" @refresh="search" />
  </div>
</template>

<script>
import editDialog from "./component/editDialog.vue";
import { listVisitRecord, manageListVisitRecord } from "@/api/visit";
import { getToken } from "@/utils/auth";
import { parseTime } from '@/utils/ruoyi';
export default {
  components: {
    editDialog
  },
  data() {
    return {
      parseTime,
			dateRange: [],
      searchForm: {
        unitName: "",
        unitOrgCode: "",
        startStaffRange: "",
        endStaffRange: "",
        startTime: "",
        endTime: ""
      },
      dataList: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      editDialogVisible: false // 新增弹窗
    };
  },
  computed: {
    avatar() {
      return this.$store.getters.avatar;
    },
    isReLoad() {
      return this.$store.getters.isReLoad;
    },
    headers() {
      return {
        Authorization: getToken()
      };
    },
    roles() {
      return this.$store.getters.roles;
    },
    supportUnitDict() {
      const dict = this.$store.getters.dict;
      const list = [];
      for (let value in dict.supportUnit) {
        list.push({
          label: dict.supportUnit[value],
          value
        });
      }
      return list;
    },
  },
  watch: {
    isReLoad(val) {
      if (val) {
        this.search();
        this.$store.dispatch("app/setReLoad", false);
      }
    }
  },
  mounted() {
    const unitName = this.$route.query.unitName;
    if (unitName) {
      this.searchForm.unitName = unitName;
    }
    this.search();
  },
  methods: {
    resetForm() {
      this.searchForm = {
        unitName: "",
        unitOrgCode: "",
        startStaffRange: "",
        endStaffRange: "",
        startTime: "",
        endTime: ""
      };
    },
    search() {
      this.pageNum = 1;
      this.getList();
    },
    getList() {
      let fn = listVisitRecord;
      if (this.roles[0].authority === "ROLE_ADMIN") {
        fn = manageListVisitRecord;
      }
			let params = {
				...this.searchForm
			}
			if (this.dateRange && this.dateRange.length > 0) {
				params.startTime = this.dateRange[0];
				params.endTime = this.dateRange[1];
			}
      fn({
        ...params,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.dataList = res.data.list;
        this.total = res.data.total;
      });
    },
    currentChange(page) {
      this.pageNum = page;
      this.getList();
    },
    cellClassName({ row, column, rowIndex, columnIndex }) {
      if (column.property === "unitName") {
        return "unitName";
      }
    },
    headerCellClassName({ row, column, rowIndex, columnIndex }) {
      if (column.property === "unitName") {
        return "unitName";
      }
    },
    gotoEdit(row) {
      this.editDialogVisible = true;
    },
    gotoDetail(row) {
      // this.$router.push({
      //   path:
      //     '/enterprise/detail?unitName=' +
      //     unitName +
      //     '&unitOrgCode=' +
      //     unitOrgCode
      // })
      let routeData = this.$router.resolve({
        path: `/enterprise/detail?enterpriseId=${row.id}&unitName=${row.unitName}&unitOrgCode=${row.unitOrgCode}`
      });
      window.open(routeData.href, "_blank");
    },
    async logout() {
      this.$confirm("确定退出系统吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$store.dispatch("LogOut").then(() => {
            location.href = "/login";
          });
        })
        .catch(() => {});
    },
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 48px 108px;

  .top-part {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10.4px 0 20px;

    .title {
      font-size: 26.4px;
    }

    .btn-group {
      display: flex;
      align-items: center;
    }

    .user {
      display: flex;
      align-items: center;
      margin-left: .14rem;
      width: 1.5rem;
      height: .6rem;
      background: rgba(255, 255, 255, 0.6);
      box-shadow: 0px .07rem 1.2rem .6rem rgba(0, 0, 0, 0.05);
      border-radius: .04rem;
      font-size: .23rem;
      color: #000822;
      padding-left: .1rem;
      box-sizing: border-box;

      img {
        width: .45rem;
        height: .45rem;
        border-radius: .07rem;
        margin-right: .11rem;
      }
    }
  }

  .content-part {
    background: #1c4088;
    border-radius: 8px 8px 8px 8px;

    .search-form {
      display: flex;
      justify-content: space-between;
      padding: 20px;

      .form-item {
        width: 190.4px;
        margin-bottom: 0;
        border-left: .8px solid rgba(255, 255, 255, 0.3);

        &:first-child {
          border: none;
        }
        .flex-div {
          display: flex;
          color: #ffffff;
        }
      }

      .form-btn {
        height: 72px;
        display: flex;
        align-items: center;
        margin-bottom: 0;

        .el-button--text {
          font-size: 16px;
          color: rgba(255, 255, 255, 0.6);
        }

        .el-button--default {
          width: 80px;
          height: 40px;
          background: #000822;
          border-radius: 4px 4px 4px 4px;
          font-size: 16px;
          color: #ffffff;
          border: none;
        }
      }

      ::v-deep .el-form-item {
        .el-form-item__label {
          color: #ffffff;
          padding: 0 15.2px;
        }

        .el-input__inner {
          background: #1c4088;
          border: none;
          color: #ffffff;
        }
        .el-range-input {
          background: #1c4088;
          border: none;
          color: #ffffff;
        }
        .el-range-separator {
          color: #ffffff;
        }
      }
    }

    .table {
      background: #ffffff;
      box-shadow: 0px 4px 64px 32px rgba(0, 0, 0, 0.05);
      border-radius: 8px 8px 8px 8px;

      ::v-deep {
        .unitName {
          .cell {
            padding-left: 40px;
          }
        }
      }

      .underline {
        cursor: pointer;
        color: #e70012;
        border-bottom: .8px solid #e70012;

        &.tag {
          color: #606266;
          border-bottom: .8px solid rgba(0, 8, 34, 0.6);

          &:not(:last-child) {
            margin-right: 10.4px;
          }
        }
      }

      .actived {
        color: #e70012;
      }

      .table-btn {
        color: rgba(0, 8, 34, 0.8);
        border-bottom: 2.4px solid #1c4088;
        padding: 4px 0;

        &.is-disabled {
          color: #c0c4cc;
          border-bottom: 2.4px solid #c0c4cc;
        }
      }

      .page {
        margin-top: 20px;
        text-align: center;
        color: #000822;
        font-size: 13.6px;

        span {
          min-width: auto;
        }

        .current {
          color: #1c4088;
          font-size: 16px;
        }

        .prev {
          color: rgba(0, 8, 34, 0.6);
          margin-right: 40px;
        }

        .next {
          color: rgba(0, 8, 34, 0.6);
          margin-left: 40px;
        }

        // ::v-deep {
        //   .el-pagination .btn-prev {
        //     padding-right: 0;
        //   }
        //   .el-pagination .btn-next {
        //     padding-left: 0;
        //   }
        // }
      }
    }
  }
}
</style>